import { useEffect } from 'react'



import { getBannerListAction, getProListAction } from './store/modules/home'

// useDispatch 用来触发修改函数的
// useSelector 是用来获取数据的
import { useDispatch, useSelector } from 'react-redux'

export default function Home() {

    // 获取修改数据的方法 dispatch
    const dispatch = useDispatch()

    // 获取全局数据
    const bannerList = useSelector(state => state.home.bannerList)
    const proList = useSelector(state => state.home.proList)

    useEffect(() => {
        // 触发异步的时候，如果没有参数就无需加 () 调用
        dispatch(getBannerListAction)
        // 如果有参数的时候可以直接调用传递即可，在状态管理中要进行接收
        dispatch(getProListAction({ limitNum: 5 }))
    }, [])



    const proHtml = proList && proList.map(item => {
        return <li key={item.proid}>
            {item.proname}
        </li>
    })

    return (
        <div>
            {bannerList && bannerList.map(item => {
                return <img style={{ width: 150 }} key={item.bannerid} src={item.img} alt="" />
            })}
            <ol>
                {proHtml}
            </ol>
        </div>
    )
}
